<template>
  <div class="photo-container">
    <h3>{{photoInfo.title}}</h3>
    <p class="subtitle">
      <span>{{photoInfo.add_time}}</span>
      <span>点击:{{photoInfo.click}}次</span>
    </p>
    <hr>
    <!-- 缩略图 -->
    <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
    <!-- 图片内容 -->
    <div class="content">{{photoInfo.content}}</div>
    <!-- 评论组件 -->
    <comment :id="id"></comment>
  </div>
</template>
<script>
import comment from "../subcomponents/comment.vue";
import api from "../../../aaa_lianxi/mock_photoinfo.js";
import a from "../../../aaa_lianxi/mock_preview_photo.js";
export default {
  components: {
    comment
  },
  data() {
    return {
      id: this.$route.params.id,
      photoInfo: {},
      slide1: []
    };
  },

  created() {
    this.getPhotoInfo();
    this.getPreview();
  },
  methods: {
    getPhotoInfo() {
      this.$http.get("/news/photoinfo").then(
        res => {
          if (res.status === 200) {
            // console.log(res);
            this.photoInfo = res.body.photoinfo[0];
          }
        },
        err => {
          console.log(err.message);
        }
      );
    },
    getPreview() {
      this.$http.get("/news/preview").then(res => {
        if (res.status === 200) {
          console.log(res);
          res.body.photos.forEach(item => {
            item.w = 600;
            item.h = 400;
          });
          this.slide1 = res.body.photos;
        }
      });
    },
    handleClose() {
      console.log("close event");
    }
  }
};
</script>
<style lang="scss" scoped>
.photo-container {
  padding: 3px;
  h3 {
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .content {
    font-size: 10px;
  }
}
</style>
